<template>
  <div class="app">
    <div>
      <van-number-keyboard theme="custom" extra-key="." close-button-text="完成" @input="onInput" @delete="onDelete" />
    </div>
    <div>
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field v-model="value" label="数字：" placeholder="请输入数字" />
      </van-cell-group>
    </div>
    <div>
      <van-button type="success" @click="trans">完成</van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";

const value: Ref<string | number | undefined> = ref("")
const trans = () => {
  value.value = Number(value.value).toString(2)

}
// 字符串相加
const onInput = (num: Number) => {
  value.value = value.value + '' + num
}
//删除按键
const onDelete = () => {
  //如果其类型为string 则执行下面语句
  if (typeof (value.value) === 'string')
    // substring（start,end) end就是数值长度-1
    value.value = value.value.substring(0, value.value.length - 1)
}

</script>

<style scoped>

</style>
<style lang="less">
// 加个app是为了不让样式污染，只让修改后的样式在该div里面生效，在外面则还是原来的样式
.app {
  .van-button--success {
    width: 100%
  }

  .van-field__label {
    width: 4.2em;
    font-size: 20px;
  }

  .van-field__body {
    font-size: 20px;
  }
}
</style>
